<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} ?: 'Asurada SSO客户端'">Asurada SSO客户端</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .navbar-brand {
            font-weight: bold;
        }
        .footer {
            margin-top: auto;
            padding: 20px 0;
            background-color: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .main-content {
            flex: 1;
        }
        .alert {
            margin-bottom: 20px;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-shield-check"></i>
                Asurada SSO客户端
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/protected">受保护页面</a>
                    </li>
                    <li class="nav-item" th:if="${isLoggedIn}">
                        <a class="nav-link" href="/profile">个人信息</a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item" th:if="${!isLoggedIn}">
                        <a class="nav-link" href="/login">
                            <i class="bi bi-box-arrow-in-right"></i>
                            登录
                        </a>
                    </li>
                    <li class="nav-item dropdown" th:if="${isLoggedIn}">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i>
                            <span th:text="${user?.username} ?: '用户'">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">
                                <i class="bi bi-person"></i> 个人信息
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" onclick="logout()">
                                <i class="bi bi-box-arrow-right"></i> 登出
                            </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container mt-4">
            <!-- 消息提示 -->
            <div th:if="${message}" class="alert alert-info alert-dismissible fade show" role="alert">
                <span th:text="${message}"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            
            <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
                <span th:text="${error}"></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>

            <!-- 页面内容 -->
            <div th:replace="${content}">页面内容</div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p class="text-muted mb-0">
                        &copy; 2024 Asurada SSO客户端演示应用
                    </p>
                </div>
                <div class="col-md-6 text-end">
                    <p class="text-muted mb-0">
                        基于Spring Boot 3.5.3 + JDK 21构建
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <script>
        // 全局JavaScript函数
        
        // 登出函数
        function logout() {
            if (confirm('确定要登出吗？')) {
                axios.post('/sso/logout')
                    .then(function (response) {
                        if (response.data.code === 200) {
                            window.location.href = '/';
                        } else {
                            alert('登出失败：' + response.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.error('登出请求失败:', error);
                        alert('登出失败，请重试');
                    });
            }
        }
        
        // 检查登录状态
        function checkLoginStatus() {
            return axios.get('/sso/check')
                .then(function (response) {
                    return response.data.code === 200 && response.data.data === true;
                })
                .catch(function (error) {
                    console.error('检查登录状态失败:', error);
                    return false;
                });
        }
        
        // 刷新令牌
        function refreshToken() {
            return axios.post('/sso/refresh')
                .then(function (response) {
                    return response.data.code === 200;
                })
                .catch(function (error) {
                    console.error('刷新令牌失败:', error);
                    return false;
                });
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 可以在这里添加页面初始化逻辑
        });
    </script>
    
    <!-- 页面特定的JavaScript -->
    <th:block th:replace="${scripts}"></th:block>
</body>
</html>